<template>
    <div class="findPass loginIndex absolute">
        <div class="title">忘记密码</div>
        <div class="step">
            <div class="step-item" :class="step === 1 ? 'active' : ''">
                <span>1</span>
            </div>
            <div class="step-item" :class="step === 2 ? 'active' : ''">
                <span>2</span>
            </div>
            <div class="step-item" :class="step === 3 ? 'active' : ''">
                <span>3</span>
            </div>
        </div>
        <div class="step-text">
            <span :class="step === 1 ? 'active' : ''">身份验证</span>
            <span :class="step === 2 ? 'active' : ''">重置密码</span>
            <span :class="step === 3 ? 'active' : ''">完成</span>
        </div>
        <div class="form">
            <!-- 身份验证 -->
            <el-form :model="formData" v-show="step === 1" status-icon :rules="formRules" ref="formRef1" :show-message="false">
                <el-form-item prop="phone">
                    <el-input v-model.trim="formData.phone" clearable placeholder="手机号" maxLength="11"></el-input>
                </el-form-item>
                <el-form-item prop="verifyCode" class="verifyCode">
                    <el-input v-model.trim="formData.verifyCode" clearable placeholder="验证码" maxLength="6"></el-input>
                    <button type="button" class="codeBtn right disabled" v-if="isDisabled">发送验证码</button>
                    <button type="button" class="codeBtn right" ref="code" v-else @click="sendCode($event, time)">发送验证码</button>
                </el-form-item>
                <el-form-item style="margin-bottom: 15px;">
                    <el-button type="primary" @click="nextStep('formRef1')">下一步</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="$store.commit('loginStore/updateStatus', 2)">返回登录</el-button>
                </el-form-item>
            </el-form>
            <!-- 重置密码 -->
            <el-form :model="formData" v-show="step === 2" status-icon :rules="formRules" ref="formRef2" :show-message="false">
                <el-form-item prop="password">
                    <el-input type="password" v-model.trim="formData.password" clearable placeholder="输入密码" maxLength="32"></el-input>
                </el-form-item>
                <el-form-item prop="repeatPassword">
                    <el-input type="password" v-model.trim="formData.repeatPassword" clearable placeholder="输入确认密码" maxLength="32"></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 15px;">
                    <el-button type="primary" @click="nextStep('formRef2')">下一步</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="$store.commit('loginStore/updateStatus', 2)">返回登录</el-button>
                </el-form-item>
            </el-form>
            <!-- 完成 -->
            <div v-show="step === 3" style="text-align: center;">
                <img src="../../assets/images/dsassd.png" alt="">
                <p style="font-size: 16px;color: #666;margin-bottom: 6px;margin-top: 15px;">密码修改成功</p>
                <p style="font-size: 14px;color: #666;">请重新登录</p>
                <p><el-button type="primary" style="width: 100%!important;margin-top: 20px;" @click="sure">确定</el-button></p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            step: 1,
            formData: {},
            formRules: {
                phone: [{required: true, triggle: 'blur'}],
                verifyCode: [{required: true, triggle: 'blur'}]
            },
            isDisabled: true,
            isRunning: false,   //验证码是否正在倒计时
            timer: null
        }
    },
    computed: {
        time() {
            return this.$store.state.loginStore.time;
        }
    },
    watch: {
        'formData.phone'(newVal) {  //监听手机号码的位数
            if(this.isRunning) {
                //如果验证码正在倒计时，取消禁用状态
                this.isDisabled = false;
            } else {
                //如果验证码不在倒计时，判断手机号位数是否等于11位，不等于11位就禁用按钮点击
                newVal.length !== 11 ? this.isDisabled = true : this.isDisabled = false;
            }
        },
        isRunning(newVal) {
            if(newVal) {
                //如果验证码正在倒计时，取消禁用状态
                this.isDisabled = false;
            } else {
                //如果验证码不在倒计时，判断手机号位数是否等于11位，不等于11位就禁用按钮点击
                let phone = this.formData['phone'];
                phone.length !== 11 ? this.isDisabled = true : this.isDisabled = false;
            }
        }
    },
    methods: {
        sendCode(ev, time) {        //发送验证码
            //发送验证码之前先校验手机号是否合法
            if(!this.$util.checkPhone(this.formData['phone'])) {
                this.$alert('手机号格式不正确', '注册提示', {
                    confirmButtonText: '确定'
                });
                return false;
            }
            //开始后台校验
            this.$http('verify/phoneForgetVerify?phone=' + this.formData['phone']).then(res => {
                if(res.data.code == 20001) {
                    this.$alert(res.data.data || '验证码发送成功', '登录提示', {
                        confirmButtonText: '确定'
                    });
                    let elem = ev.target;
                    this.timer = setInterval(() => {
                        if(time <= 1) {
                            clearInterval(this.timer);
                            elem.innerHTML = '发送验证码';
                            this.isRunning = false;
                        } else {
                            time--;
                            elem.innerHTML = time;
                            this.isRunning = true;
                        }
                    }, 1000);
                } else {
                    this.$alert(res.data.msg || '验证码发送失败', '登录提示', {
                        confirmButtonText: '确定'
                    });
                }
            });
        },
        nextStep(formName) {        //点击下一步
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.step === 1) {
                        if(!this.$util.checkPhone(this.formData['phone'])) {
                            this.$alert('手机号格式不正确', '注册提示', {
                                confirmButtonText: '确定'
                            });
                            return false;
                        }
                        if(!this.formData['verifyCode']) {
                            this.$notify({message: '验证码不能为空', type: 'warning', duration: 1500, offset: 30});
                            return false;
                        }
                        //后台校验
                        this.$http.get('verify/checkPhoneVerify?phone=' + this.formData['phone'] + '&code=' + this.formData['verifyCode']).then(res => {
                            if(res.data.code == 20001) {
                                this.$alert(res.data.data || '验证码校验成功', '找回密码提示', {
                                    confirmButtonText: '确定'
                                });
                                this.step = 2;
                                return true;
                            } else {
                                this.$alert('验证码不正确', '找回密码提示', {
                                    confirmButtonText: '确定'
                                });
                                return false;
                            }
                        });
                    } else if(this.step === 2) {
                        //这一步就发送手机号、密码、确认密码、验证码到后台验证，验证通过后才执行第三步
                        if(!this.formData['password']) {
                            this.$notify({message: '密码不能为空', type: 'warning', offset: 30, duration: 1500});
                            return false;
                        } else if(!this.formData['repeatPassword']) {
                            this.$notify({message: '前后密码不一致', type: 'warning', offset: 30, duration: 1500});
                            return false;
                        } else {
                            this.$http({
                                url: 'register/lostPassword',
                                method: 'post',
                                params: this.formData
                            }).then(res => {
                                if(res.data.code == 20001) {
                                    this.$alert(res.data.data, '提示', {
                                        confirmButtonText: '确定'
                                    });
                                    this.step = 3;
                                    return true;
                                } else {
                                    this.$alert('修改密码失败！', '提示', {
                                        confirmButtonText: '确定'
                                    });
                                    return false;
                                }
                            });
                        }
                    }
                }
            });
        },
        sure() {        //最后一步确定
            clearInterval(this.timer);
            this.step = 1;
            this.isDisabled = true;
            this.isRunning = false;
            this.$refs.code.innerHTML = '发送验证码';
            this.$refs['formRef1'].resetFields();       //重置表单
            this.$refs['formRef2'].resetFields();       //重置表单
            this.$store.commit('loginStore/updateStatus', 2);
        }
    }
}
</script>
<style scoped>
    .findPass {
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;
        padding: 0 20px;
        width: 600px;
        height: 360px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: slideDown .2s;
    }
    .findPass .title {
        text-align: center;
        padding: 15px 0;
        font-size: 18px;
        letter-spacing: 1px;
    }
    .step {overflow: hidden;}
    .step .step-item {
        width: 33.3333%;
        float: left;
        text-align: center;
        margin-bottom: 5px;
        line-height: 31px;
    }
    .step .step-item > span {
        display: inline-block;
        width: 31px;
        height: 31px;
        font-size: 14px;
        color: #fff;
        vertical-align: middle;
        background: url(../../assets/images/sd.png) no-repeat;
        background-size: cover;
    }
    .step .step-item.active > span {
        background: url(../../assets/images/sd-active.png) no-repeat;
        background-size: cover;
    }
    .step .step-item:before,
    .step .step-item:after{
        content: '';
        display: inline-block;
        background-color: #eaeaea;
        width: calc(50% - 21px);
        height: 2px;
        vertical-align: middle;
    }
    .step .step-item:before {
        margin-right: 5px;
    }
    .step .step-item:after {
        margin-left: 5px;
    }
    .step .step-item.active:before,
    .step .step-item.active:after {
        background-color: #249eef;
    }
    .step .step-item > p {
        position: absolute;
        bottom: 0;
    }
    .step-text {overflow: hidden;}
    .step-text > span {
        width: 33.3333%;
        text-align: center;
        display: block;
        float: left;
        line-height: 24px;
    }
    .step-text > span.active {color: #249eef;}
    .findPass .form {width: 440px; margin: 25px auto;}
    @keyframes slideDown {
        0% {transform: translate(-50%, -56%);}
        100% {transform: translate(-50%, -50%);}
    }
</style>